<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue入门指南——应用与根组件</title>
    <link rel="stylesheet" href="common.css" />
    <script type="importmap">
      {
        "imports": {
          "vue": "https://lib.baomitu.com/vue/latest/vue.esm-browser.js"
        }
      }
    </script>
  </head>
  <body>
    <div id="app1">
      <p>{{ message }}</p>
    </div>
    <div id="app2">
      <p>{{ message }}</p>
    </div>
    <script type="module">
      import { createApp } from "vue";

      //根组件
      const root1 = {
        data() {
          return {
            message: "app1 - 根组件,应用实例，应用实例挂载到指定容器",
          };
        },
      };
      //应用实例
      const app1 = createApp(root1);
      //挂载应用实例到指定容器
      app1.mount("#app1");

      //根组件
      const root2 = {
        data() {
          return {
            message: "app2 - 根组件,应用实例，应用实例挂载到指定容器",
          };
        },
      };
      //应用实例
      const app2 = createApp(root2);
      //挂载应用实例到指定容器
      app2.mount("#app2");
    </script>
  </body>
</html>
